<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时器</title>
</head>

<body>
    <div id="timerDisplay">00:00:00</div>
    <button id="startButton">开始</button>
    <button id="pauseButton">暂停</button>
    <button id="resetButton">重置</button>
    <script>
        let intervalId;//定时器标识符
        let hours = 0;
        let minutes = 0;
        let seconds = 0;
        let isPaused = true;//表示定时器暂停状态

        const timerDisplay = document.getElementById('timerDisplay');
        const startButton = document.getElementById('startButton');
        const pauseButton = document.getElementById('pauseButton');
        const resetButton = document.getElementById('resetButton');

        function updateTimer() {
            seconds++;
            if (seconds === 60) {
                seconds = 0;
                minutes++;
                if (minutes === 60) {
                    minutes = 0;
                    hours++;
                }
            }
            const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
            timerDisplay.innerHTML = formattedTime;//innerHTML设置或获取元素开始标签和结束标签之间的HTML内容返回结果包含HTML标签，保留空格和换行
        }

        startButton.addEventListener('click', function () {
            if (isPaused) {
                intervalId = setInterval(updateTimer, 1000);//每隔1000毫秒重复调用这个函数
                isPaused = false;
            }
        });

        pauseButton.addEventListener('click', function () {
            clearInterval(intervalId);//停止计时器
            isPaused = true;
        });

        resetButton.addEventListener('click', function () {
            clearInterval(intervalId);
            hours = 0;
            minutes = 0;
            seconds = 0;
            timerDisplay.innerHTML = '00:00:00';
            isPaused = true;
        });
    </script>
</body>

</html>